require('../../less/controls/layout.less');
var React = require('react');

module.exports = React.createClass({
	displayName:'Layout',
	getInitialState:function(){
		return {

		}
	},
	componentDidMount:function(){

	},
	__onClick: function (event){
		this.props.onClick && this.props.onClick(this.props, event);
	},
	ext: function (target, source){
		for(var key in source){
			target[key] = source[key];
		}
		return target;
	},
	getConfig: function (props) {
		var _dir = props.direction,
			_begin = props.begin || 0,
			_end = props.end || 0,
			_head = {},
			_body = {},
			_foot = {};

		if(_dir == 'H'){
			_head = {
				width: _begin + 'px'
			};
			_body = {
				left: _begin + 'px',
				right: _end + 'px'
			};
			_foot = {
				width: _end + 'px'
			}
		} else {
			_head = {
				height: _begin + 'px'
			};
			_body = {
				top: _begin + 'px',
				bottom: _end + 'px'
			};
			_foot = {
				height: _end + 'px'
			}
		}

		return {
			head: this.ext(_head, props.hStyle||{}),
			body: this.ext(_body, props.bStyle||{}),
			foot: this.ext(_foot, props.fStyle||{})
		}
	},
	render:function(){
		this.props.direction = this.props.direction || 'H';
		var _children = this.props.children;
		var _config = this.getConfig(this.props);   //h, v
		return (
			<div style={this.props.style} className={"c-layout " + this.props.direction + ' ' + (this.props.skin || '')}>
				{
					this.props.begin && <div ref="layout-head" className="c-layout-head" style={_config.head}>
						{_children[0]}
					</div>
				}
				<div ref="layout-body" className="c-layout-body" style={_config.body}>
					{_children[1]}
				</div>
				{
					this.props.end && <div ref="layout-foot" className="c-layout-foot" style={_config.foot}>
						{_children[2]}
					</div>
				}
			</div>
		);
	}
});
